<template>
  <div>

    <el-breadcrumb class="app-breadcrumb" separator="/">
      <el-breadcrumb-item>

      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
  import {
    generateTitle
  } from '@/utils/i18n'
  import pathToRegexp from 'path-to-regexp'
  import {
    mapGetters
  } from 'vuex'
  import elDragDialog from '@/directive/el-drag-dialog'
  import permission from '@/directive/permission' // base on element-ui
  export default {
    data() {
      return {
        levelList: null,
        mchIdOptions: [],
        sysMchId: '',
        sysMchName: '',
        mchTableVisible: false,
        textNumber: null
      }
    },
    directives: {
      elDragDialog
    },
    watch: {
      $route(route) {
        // if you go to the redirect page, do not update the breadcrumbs
        if (route.path.startsWith('/redirect/')) {
          return
        }
        this.getBreadcrumb()
      }
    },
    created() {
      this.getBreadcrumb()
     },
    computed: {
      ...mapGetters([
        'mchId', 'mchName'
      ])
    },
    components: {

    },
    methods: {
      generateTitle,
      getBreadcrumb() {
        // only show routes with meta.title
        let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
        const first = matched[0]
        if (!this.isDashboard(first)) {
          matched = [{
            path: '/dashboard',
            meta: {
              title: 'dashboard'
            }
          }].concat(matched)
        }
        this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
      },
      isDashboard(route) {
        const name = route && route.name
        if (!name) {
          return false
        }
        return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
      },
      pathCompile(path) {
        // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
        const {
          params
        } = this.$route
        var toPath = pathToRegexp.compile(path)
        return toPath(params)
      },
      handleLink(item) {
        const {
          redirect,
          path
        } = item
        if (redirect) {
          this.$router.push(redirect)
          return
        }
        this.$router.push(this.pathCompile(path))
      },
      closeAllTags(view) {
        console.log()
        this.$store.dispatch('tagsView/delAllViews').then(({
          visitedViews
        }) => {
          console.log(visitedViews)
          this.$router.push('/')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 8px;

    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }

  /deep/.el-input__inner {
    border: none;
    padding-left: 0;
  }

  /deep/.el-breadcrumb__separator {
    margin: 0;
  }

  .elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }

  /deep/.el-dialog__body {
    padding-top: 0 !important;
    padding-bottom: 20px;
  }
</style>
